<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-11-01 09:18:18
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-02 10:31:01
 * @FilePath: \vue-admin-template\src\components\formCollect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 填写表单 -->
<template>
    <div v-if="showPage">
        <div style="margin-bottom: 7px;">
            <img @click="clickBack" style="vertical-align: bottom;margin-right: 10px;cursor: pointer;"
                src="@/assets/icon/返回.png" alt="">
            <span class="normal-text" style="font-size: 19px;">{{ $route.name }}</span>
        </div>
        <div class="formItem-main">
            <div style="display: flex;justify-content: space-between;">
                <div class="title">
                    {{ id ? '修改' : '新增' }}模具
                </div>
                <div>
                    <el-button type="primary" class="noraml-btn" @click="save">保存</el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <section>
                <el-form :rules="rules" ref="ruleForm" :label-position="'top'" :inline="true" :model="formInline"
                    class="demo-form-inline">
                    <div style="display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;">
                        <el-form-item label="类别" style="width: 30%;" prop="type">
                            <el-input clearable v-model="formInline.type" style="width: 100%;" placeholder="类别"></el-input>
                        </el-form-item>
                        <el-form-item label="制造编号" style="width: 30%;" prop="code">
                            <el-input clearable v-model="formInline.code" style="width: 100%;"
                                placeholder="制造编号"></el-input>
                        </el-form-item>
                        <el-form-item label="端子型号" style="width: 30%;" prop="norm">
                            <el-input clearable v-model="formInline.norm" style="width: 100%;"
                                placeholder="端子型号"></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;">
                        <el-form-item label="生产商" style="width: 30%;" prop="manufacturer">
                            <el-input clearable v-model="formInline.manufacturer" style="width: 100%;"
                                placeholder="生产商"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" style="width: 30%;" prop="num">
                            <el-input type="number" clearable v-model="formInline.num" style="width: 100%;"
                                placeholder="数量"></el-input>
                        </el-form-item>
                        <el-form-item label="入厂日期" style="width: 30%;" prop="entryDate">
                            <el-date-picker style="width: 100%;" value-format="yyyy-MM" v-model="formInline.entryDate"
                                type="month" placeholder="选择月">
                            </el-date-picker>

                        </el-form-item>
                    </div>

                    <div style="display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;">
                        <el-form-item label="使用年限" style="width: 30%;" prop="life">
                            <el-input type="number" clearable v-model="formInline.life" style="width: 100%;"
                                placeholder="使用年限"></el-input>
                        </el-form-item>
                        <el-form-item label="使用部门" style="width: 30%;" prop="userDepar">
                            <el-input clearable v-model="formInline.userDepar" style="width: 100%;"
                                placeholder="使用部门"></el-input>
                        </el-form-item>
                        <el-form-item label="最大压接次数" style="width: 30%;" prop="maxNext">
                            <el-input type="number" clearable v-model="formInline.maxNext" style="width: 100%;"
                                placeholder="最大压接次数"></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;">
                        <el-form-item label="保养周期" style="width: 30%;" prop="serInter">
                            <el-input type="number" clearable v-model="formInline.serInter" style="width: 90%;"
                                placeholder="保养周期"></el-input><span style="margin-left: 15px;">天</span>
                        </el-form-item>
                        <el-form-item label="备注" style="width: 30%;" prop="remark">
                            <el-input clearable v-model="formInline.remark" style="width: 100%;"
                                placeholder="备注"></el-input>
                        </el-form-item>
                        <el-form-item label=" " style="width: 30%;" prop="remark">

                        </el-form-item>
                    </div>
                    <div style="display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;">
                        <el-form-item label="附件" style="width: 30%;">
                            <div>
                                <el-button @click="clickUpLoad" size="small" type="primary">点击上传</el-button>

                            </div>
                        </el-form-item>
                    </div>
                    <el-upload ref="upload" class="upload-demo" :headers="headers"
                        :action="this.$http + '/mold/ledger-file/upload'" :on-success="handleSuccess"
                        :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                        <div slot="file" slot-scope="{file}">
                            <div class="el-upload-list__item-thumbnail file-list-styles">
                                <span v-if="file.fileType">{{ file.fileType.toUpperCase() }}</span>
                                <span v-if="file.response">{{ file.response.data.fileType.toUpperCase()
                                }}</span>
                            </div>
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-name" style="width:50%">{{ file.name }}</span>
                                <span @click="deleteRemove(file)">
                                    <i class="el-icon-close"></i>
                                </span>

                            </span>
                        </div>
                    </el-upload>
                </el-form>

            </section>
        </div>

    </div>
</template>
  
<script>
import Cookies from 'js-cookie';
export default {

    props: {
        state: {
            type: Number
        },
        id: {
            type: [String, Number]
        },
        options: {
            type: Array
        }


    },
    data() {
        return {
            rules: {
                type: [
                    { required: true, message: '请输入类别', trigger: ['blur', 'change'] }
                ],
                norm: [
                    { required: true, message: '请输入端子型号', trigger: ['blur', 'change'] }
                ],
                manufacturer: [
                    { required: true, message: '请输入生产商', trigger: ['blur', 'change'] }
                ],
                num: [
                    { required: true, message: '请输入数量', trigger: ['blur', 'change'] }
                ],
                entryDate: [
                    { required: true, message: '请选择入厂日期', trigger: ['blur', 'change'] }
                ],
                life: [
                    { required: true, message: '请输入使用年限', trigger: ['blur', 'change'] }
                ],
                userDepar: [
                    { required: true, message: '请输入使用部门', trigger: ['blur', 'change'] }
                ],
                maxNext: [
                    { required: true, message: '请输入最大压接次数', trigger: 'blur' },
                    { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的整数' }


                ],
                serInter: [
                    { required: true, message: '请输入保养周期', trigger: 'blur' },
                    { pattern: /^\+?[1-9]\d*$/, message: '请输入大于0的整数' }
                ],
            },
            fileList: [],
            headers: {},
            showPage: false,
            formInline: {
                type: '',
                code: '',
                norm: '',
                manufacturer: '',
                num: '',
                entryDate: '',
                userDepar: '',
                life: '',
                maxNext: '',
                serInter: 90,
                remark: '',
                genre: 0,
                moldLedgerFileList: []
            },
        }
    },
    mounted() {
        // 上传请求头
        this.headers[Cookies.get('tokenNameEqu')] = Cookies.get('tokenValueEqu');
        if (this.id) {
            this.$baseRequestGetParams('/mold/mold/getInfo', { id: this.id, genre: 0 }, {}, 'get').then(res => {
                this.formInline = res.data;
                this.formInline.genre = 0;
                this.fileList = this.formInline.moldLedgerFileList.map(item => { // 按插件回显格式再次处理 pdf文件添加自定义封面
                    item.name = item.fileName;
                    delete item.status;
                    return item
                });
                this.showPage = true;
            })
        } else {
            this.showPage = true;
        }
    },
    methods: {
        save() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    this.formInline.moldLedgerFileList = this.formInline.moldLedgerFileList.map(item => {
                        let arr = {
                            fileName: item.fileName,
                            filePath: item.filePath,
                            fileSize: item.fileSize,
                            fileType: item.fileType,
                        }
                        if (item.id) {
                            arr.id = item.id;
                            arr.genre = item.genre;
                        }
                        return arr
                    })
                    this.formInline.num = Number(this.formInline.num);
                    this.formInline.serInter = Number(this.formInline.serInter);
                    this.formInline.maxNext = Number(this.formInline.maxNext);
                    this.formInline.life = Number(this.formInline.life);
                    let url = this.id ? '/mold/mold/revise' : '/mold/mold/create';
                    let meth = this.id ? 'put' : 'post'
                    this.$baseRequest(url, this.formInline, {}, meth).then(res => {
                        this.$message.success(`${this.id ? '修改' : '添加'}成功`);
                        this.$emit('closeDetail', 'isFresh')
                    })
                } else {

                    return false;
                }
            });
        },
        clickBack() {
            this.$emit('closeDetail')
        },
        /**
         * @description: 文件移除后回调
         * @param {*} file
         * @param {*} fileList
         * @return {*}
         */
        handleRemove(file, fileList) {
            this.formInline.moldLedgerFileList = [];
            fileList.forEach(item => {
                if (item.response) {
                    this.formInline.moldLedgerFileList.push(this._.omitBy(item.response.data, (v) => _.isUndefined(v) || _.isNull(v) || v === ''))
                } else {
                    this.formInline.moldLedgerFileList.push({
                        fileName: item.fileName,
                        filePath: item.filePath,
                        fileSize: item.fileSize,
                        fileType: item.fileType,
                        id: item.id,
                        genre: item.genre
                    })
                }

            })
        },
        /**
         * @description: 文件上传成功后回调
         * @param {*} file
         * @return {*}
         */
        handleSuccess(file) {

            this.formInline.moldLedgerFileList.push(this._.omitBy(file.data, (v) => _.isUndefined(v) || _.isNull(v) || v === ''))
        },

        /**
         * @description: 文件移除
         * @param {*} file
         * @return {*}
         */
        deleteRemove(file) {
            this.$refs.upload.handleRemove(file);
        },
        clickUpLoad() {
            document.querySelector(" .el-upload").click()
        }
    }
}
</script>
<style>
.el-upload-list--picture {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.el-upload-list__item {
    width: 300px;
}
</style>
<style lang="scss" scoped>
.formItem-main {
    margin-top: 10px;
    padding: 40px 30px;
    border: 1px solid #E4E6EC;
    background-color: #fff;


    .title {
        font-size: 26px;
    }
}

.downFile-box {
    position: absolute;
    right: 20px;
    top: 35%;
    color: #5CD8DA;
    cursor: pointer;
}

.file-list-styles {
    background-color: #E0EFFC;
    border-radius: 5px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
}
</style>
  